<template>
    <div class="main">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
            <template #header>
                <div class="card-header">
                    <span>管理员用户管理</span>
                    <!-- 功能设定 -->
                    <div style="display: flex;">
                        <!-- 增加用户 -->
                        <el-button type="primary" icon="plus" plain text @click="handleAdd">
                            增加</el-button>
                        <el-dialog v-model="dialogadd" title="添加用户" style="text-align: center;" width="40%"
                            :before-close="handleclose">
                            <div style="display: flex; justify-content:center;">
                                <el-form style="width: 80%;" label-position="left" :model="form">
                                    <el-form-item label="名称">
                                        <el-input v-model="form.uname" autocomplete="off" placeholder="名称" />
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input v-model="form.password" autocomplete="off" placeholder="密码" />
                                    </el-form-item>
                                    <el-form-item label="邮箱">
                                        <el-input v-model="form.mail" autocomplete="off" placeholder="邮箱" />
                                    </el-form-item>
                                    <el-form-item label="电话">
                                        <el-input v-model="form.phone" autocomplete="off" placeholder="电话" />
                                    </el-form-item>
                                    <el-form-item label="类型">
                                        <el-select v-model="form.type" placeholder="管理员用户">
                                            <el-option label="管理员用户" value="管理员用户" />
                                            <el-option label="普通用户" value="普通用户" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <el-select v-model="form.sex" placeholder="男">
                                            <el-option label="男" value="男" />
                                            <el-option label="女" value="女" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <el-select v-model="form.status" placeholder="正常">
                                            <el-option label="正常" value="正常" />
                                            <el-option label="禁用" value="禁用" />
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="dialogadd = false">取消</el-button>
                                    <el-button type="primary" @click="handleAddOK">确认</el-button>
                                </span>
                            </template>
                        </el-dialog>

                        <el-button type="danger" icon="delete" plain @click="handleDeleteBatch">删除</el-button>

                        <el-input v-model="input" prefix-icon="Search" placeholder="请输入查找内容"
                            style=" width: 50%;padding-left: 10px;" />
                    </div>
                </div>
            </template>

            <!-- 用户列表 -->
            <div class="main-table">
                <el-table @selection-change="handleSelectionChange" :data="tableData" style="width:100%">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="名称" property="uname" />
                    <el-table-column label="邮箱" property="mail" />
                    <el-table-column label="电话" property="phone" />
                    <el-table-column label="创建时间" property="createTime" />
                    <el-table-column label="更新时间" property="updateTime" />
                    <el-table-column label="用户类型" property="type" />
                    <el-table-column label="用户状态" property="status" />
                    <el-table-column label="用户性别" property="sex" />
                    <el-table-column label="用户头像" property="avatarUrl">
                        <template #default="scope">
                            <el-image :src="scope.row.avatarUrl"></el-image>
                        </template>
                    </el-table-column>


                    <el-table-column label="操作">
                        <template #default="scope">

                            <!-- 编辑按钮 -->
                            <el-button size="small" type="primary" text @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <!-- 弹出编辑框 -->
                            <el-dialog v-model="dialogVisible" title="编辑信息" style="text-align: center;" width="40%"
                                :before-close="handleClose">
                                <div style="display: flex; justify-content:center;">
                                    <el-form style="width: 80%;" label-position="left" :model="form">
                                        <el-form-item label="名称">
                                            <el-input v-model="form.uname" autocomplete="off" placeholder="名称" />
                                        </el-form-item>
                                        <el-form-item label="密码">
                                            <el-input v-model="form.password" autocomplete="off" placeholder="密码" />
                                        </el-form-item>
                                        <el-form-item label="邮箱">
                                            <el-input v-model="form.mail" autocomplete="off" placeholder="邮箱" />
                                        </el-form-item>
                                        <el-form-item label="电话">
                                            <el-input v-model="form.phone" autocomplete="off" placeholder="电话" />
                                        </el-form-item>
                                        <el-form-item label="类型">
                                            <el-select v-model="form.type" placeholder="管理员用户">
                                                <el-option label="管理员用户" value="管理员用户" />
                                                <el-option label="普通用户" value="普通用户" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="性别">
                                            <el-select v-model="form.sex" placeholder="男">
                                                <el-option label="男" value="男" />
                                                <el-option label="女" value="女" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="状态">
                                            <el-select v-model="form.status" placeholder="正常">
                                                <el-option label="正常" value="正常" />
                                                <el-option label="禁用" value="禁用" />
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                </div>
                                <template #footer>
                                    <span class="dialog-footer">
                                        <el-button @click="dialogVisible = false">取消</el-button>
                                        <el-button type="primary" @click="handleEditOk">确认</el-button>
                                    </span>
                                </template>
                            </el-dialog>


                            <!-- 删除按钮 -->
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="是否确认删除该用户？"
                                @confirm="handleDelete(scope.$index, scope.row)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>


                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <x-pagination :pagination="pagination" :refresh="refreshAdmin"></x-pagination>
        </el-card>
    </div>
</template>

<script setup>
import xPagination from "../components/x-pagination.vue";
import { listAdmin, addUser, editUser, delUser, delUserBatch } from "../api/user-manager";

const tableData = reactive([]);
const input = ref();
const dialogVisible = ref(false);
const dialogadd = ref(false);
const form = reactive({
    uname: '',
    password: '',
    mail: '',
    phone: '',
    type: '管理员用户',
    sex: '男',
    status: '启用'
});
const multipleSelection = ref([])
const pagination = reactive({
    current: 1,
    size: 5,
    total: 10
})

const refreshAdmin = () => {
    listAdmin(pagination).then((data) => {
        Object.assign(tableData, data.rows)
        pagination.total = parseInt(data.total)
    });
}

const handleClose = () => {
    dialogVisible.value = false
};

const handleDeleteBatch = async () => {
    //TODO: 优化等待时的体验
    await delUserBatch(multipleSelection.value.map(it => it.uid))
    window.location.reload()
};

const handleclose = () => {
    dialogadd.value = false
};

const centerDialogVisible = ref(false)

const handleDelete = (index, row) => {
    delUser(row.uid).then(data => {
        //TODO: 增加确认弹窗
        if (data.code == 200) window.location.reload()
    })
};


const handleEdit = (index, row) => {
    dialogVisible.value = true
    Object.assign(form, row)
};

const handleEditOk = () => {
    editUser(form).then(data => {
        console.log(data);
        // TODO: 完成表单验证
        if (data.code == 200) window.location.reload()
    })
}

const handleAdd = () => {
    dialogadd.value = true
};

const handleAddOK = () => {
    dialogadd.value = false
    console.log(form);
    // TODO: 完成表单验证
    addUser(form).then((data) => {
        console.log(data);
        if (data.code == 200) window.location.reload()
    })
}

const handleSelectionChange = (value) => {
    multipleSelection.value = value
}

onMounted(() => {
    refreshAdmin()
})

</script>

<style scoped>
.box-card {
    height: 100%;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dia-input {
    display: contents;
    margin-top: 20px;
    overflow: hidden;
}

.dia-input el-input {
    margin-top: 15px;
}

.dia-button {
    display: block;
    align-items: center;
    margin-right: 10px;

}

.dia-word {
    font-size: 20px;
    text-align: center;
    margin: 0;
}
</style>